<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
<style>
	h1{
		margin: 2rem;
	}
</style>
</head>

<body>
<h1>单选</h1>
<div id='x0'></div>
<h1>多选</h1>
<div id='x1'></div>
<h1>输入</h1>
<div id='x2'></div>
<h1>评级</h1>
<div id='x3'></div>
<h1>开关</h1>
<div id='x4'></div>
<h1>文件上传</h1>
<div id='x5'></div>
<h1>密码</h1>
<div id='x6'></div>
<h1>多行文本</h1>
<div id='x7'></div>
<h1>范围</h1>
<div id='x8'></div>
<h1>颜色</h1>
<div id='x9'></div>
<h1>自定义对话框</h1>
<div id='x10'></div>
<h1>前</h1>
<div id='x20'></div>
<h1>后</h1>
<div id='x21'></div>
<h1>前&后</h1>
<div id='x22'></div>

</body>
<script type="module">
    import input from './js/src/xInput.js';
    import xGroupInput from './js/src/xGroupInput.js';
    import xModal from './js/src/xModal.js';

    let data = [{
        code: '430100',
        name: '长沙'
    }, {
        code: '430200',
        name: '株洲'
    }, {
        code: '430300',
        name: '湘潭'
    }];

    new input({
        el: "x0", data, mandatory: true,
        type: "radio"
    });

    new input({
            el: "x1",
            data,
            mandatory: true,
            type: "checkbox"
        }
    );

    new input({
        el: "x2",
        mandatory: true,
        type: "text",
        regexp: /[^\d]/g
    });

    new input({el: "x3", type: "rate", mandatory: true, half: true});

    new input({el: "x4", type: "switch", mandatory: true, data: '关,开'});
    new input({el: "x5", type: "file", mandatory: true});
    new input({el: "x6", type: "password", mandatory: true});
    new input({el: "x7", type: "textarea", mandatory: true,rows:10});
    
    new input({el: "x8", type: "range", mandatory: true});
    
    new input({el: "x9", type: "color", mandatory: true});
     
     
    new input({el: "x10", type: "modal", mandatory: true,modal:new xModal()});
    
    new xGroupInput({el: "x20", type: "text", mandatory: true, prepare:'http://'});
    new xGroupInput({el: "x21", type: "text", mandatory: true, append:'.com'});
    new xGroupInput({el: "x22", type: "text", mandatory: true, prepare:'http://',append:'.com'});
     
</script>

</html>